import './modal.css';
import React,{ Component } from 'react';
import { Modal,Button,Icon } from 'antd';
const confirm = Modal.confirm;
const info = Modal.info;
class Modals extends Component {
	constructor(props) {
		super(props);
		this.state = {
            visible: true,
		}
    }
    handleOk=()=>{
        this.setState({
            visible: false,
        })
    }
    handleCancel=()=>{
        this.setState({
            visible: false,
        })
    }
    info =()=> {
        Modal.info({
            title: '提示',
            content: (
                <div>
                    <p>some messages...some messages...</p>
                    <p>some messages...some messages...</p>
                </div>
            )
        })
    }
    showConfirm = ()=> {
        confirm({
            title: '提示',
            //content: 'Some descriptions',
            // okText: '确认',
            // cancelText: '取消',
            // okType: 'danger',
            //点击蒙层是否关闭
            maskClosable: true,
            okButtonProps: {
                disabled: true,
            },
            onOk() {
              console.log('OK');
            },
            onCancel() {
              console.log('Cancel');
            },
            iconType: 'exclamation-circle',
            closable: true,
            content: (
                <div style={{ borderTop: '1px solid #ccc',borderBottom: '1px solid #ccc'}}>
                    <p>some messages...some messages...</p>
                    <p>some messages...some messages...</p>
                </div>
            )
        });
    }
    showConfirms = ()=>{
        confirm({
            title: '提示',
            width: '320px',
            iconType: 'exclamation-circle',
            className: 'modalStyle',
            closable: 'true',
            content: (
                <div style={{ borderTop: '1px solid #ccc '}}>
                    <p>some messages</p>
                    <p>some messages</p>
                </div>
            ) 
            //className: 'warnTip',
            //content: getLangTxt("del_content"),
            // onOk: () => {
            //     let {tableData, allTipsCount = 0} = this.props,
            //         {currentPage, getAllTips} = this.state,
            //         isUpdate = getAllTips && currentPage < allTipsCount / 10;

            //     this.props.removeTips(obj, isUpdate, currentPage);
            //     if(getAllTips && tableData.length === 1)
            //     {
            //         currentPage = currentPage > 1 ? currentPage - 1 : currentPage;
            //         let obj = {page: currentPage, rp: 10};
            //         this.props.getAllTipsData(obj);

            //         this.setState({currentPage});
            //     }
            // }
        });
    }
	render() {
		return (
			<div>
				<Modal
                    title={<div><Icon type="exclamation-circle" theme="outlined" style={{ marginRight: 5,color: 'red'}}/>123</div> }
                    centered = { true }
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    iconType='exclamation-circle'
                    style={ {marginTop: 100} }
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
                <Button onClick={ this.info }>Info</Button>
                <Button onClick={ this.showConfirms }>
                    Confirm
                </Button>
			</div>
		)
	}
}
export default Modals;